import React from 'react'
import "./index.css"
import Muntil from 'until/mm.jsx'
import USer from 'service/user-service.jsx'

const _mm=new Muntil();
const _user=new USer();

class Login extends React.Component{
    constructor(){
        super();
        this.state={
            username:"",
            password:"",
            redirect: _mm.getUrlParam('redirect') || '/'
        }
    }

    componentWillMount(){
        document.title="登陆 — SHOP REACT"
    }

    //当input发生改变时
    onInputChange(e){

        let inputname=e.target.name
        let inputvalue=e.target.value
        this.setState({
            [inputname]:inputvalue
        })
    }

    //按下回车键时
    onInputKeyUp(e){
        if(e.keyCode===13){
            this.onSubmit()
        }
    }

    //当点击提交按钮时
    onSubmit(){
        let loginInfo={
            username: this.state.username,
            password:this.state.password
        },
            checkResult=_user.checkLoginInfo(loginInfo)

        if (checkResult.status){
            _user.login(loginInfo).then((res)=>{
                //存储到本地
               _mm.setStorage("userInfo",res)
                //提交成功，推进一个新页面
                this.props.history.push(this.state.redirect)

            },(errMsg)=>{
                _mm.errorTips(errMsg);
            })
        }else {
            _mm.errorTips(checkResult.msg)
        }


    }


    render(){
        return(
            <div className="row">
                <div className="col-md-4 col-md-offset-4">
                    <div className="panel panel-default panel-margin">
                        <div className="panel-heading">欢迎登陆 — ShopReact管理系统</div>
                        <div className="panel-body">
                            <div>
                                <div className="form-group">
                                    <input type="text"
                                           name="username"
                                           className="form-control"
                                           onKeyUp={e=>{this.onInputKeyUp(e)}}
                                           placeholder="请输入用户名"
                                           onChange={(e)=>{this.onInputChange(e)}}
                                    />
                                </div>
                                <div className="form-group">
                                    <input type="password"
                                           name="password"
                                           className="form-control"
                                           onKeyUp={e=>{this.onInputKeyUp(e)}}
                                           placeholder="请输入密码"
                                           onChange={(e)=>{this.onInputChange(e)}}
                                    />
                                </div>

                                <button  className="btn btn-primary btn-block" onClick={()=>{this.onSubmit()}}>登陆</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        )
    }

}

export default Login;